<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>詹姆斯、库里、杜兰特NBA数据对比雷达图</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/theme/vintage.js"></script>
</head>
<body>
<div class="cart" style="width: 1000px;height: 600px;margin: auto"></div>
<script>
    var myCharts = echarts.init(document.querySelector('.cart'),'vintage')
    var indicator_data = {{ indicator|tojson }}
    var zms = {{ zms|tojson }}
    var kl = {{ kl|tojson }}
    var dlt = {{ dlt|tojson }}
    var option = {
        title:{
            text:"詹姆斯、库里、杜兰特NBA数据对比",
            textStyle:{
                fontFamily:'楷体',
                fontSize:21
            },
            top: 10,
            left:10
        },
        radar:{
            indicator:indicator_data,
            shape:'polygon'
        },
        legend:{
            name:['詹姆斯','库里','杜兰特'],
            top: 10
        },
        tooltip:{
            trigger:'item',
            triggerOn:'mousemove',
            formatter:function(res)
            {
                return '姓名：'+res.name+'<br>'+'场均得分：'+res.value[0]+'<br>'+'场均上场时间：'+res.value[1]+
                    '<br>'+'场均盖帽：'+res.value[2]+'<br>'+'场均助攻：'+res.value[3]+'<br>'+'场均篮板：'+res.value[4]+
                    '<br>'+'场均三分命中率：'+(res.value[5]*1000/10).toFixed(1)+'%'+'<br>'+'场均罚球率：'+(res.value[6]*1000/10).toFixed(1)+'%'
            }
        },
        series:[
            {
                type:'radar',
                data:[
                    {
                        name:'詹姆斯',
                        value: zms
                    },
                    {
                        name:'库里',
                        value: kl
                    },
                    {
                        name:'杜兰特',
                        value: dlt
                    }
                ]
            }
        ]
    }
    myCharts.setOption(option)
</script>
</body>
</html>